import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import DistributionCarousel  from './distributionCarousel';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {routerRedux} from "dva/router";
import {distribution} from './distribution.less';
import MyStoreOrderItem from "./myStoreOrderItem";
import  caidan from'../../assets/svg/caidan.svg';
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";

const Item = Popover.Item;




class CashDetail extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            tabs:[{title:"全部",type:"0"},{title:"收入",type:"1"},{title:"支出",type:"2"}]
        };

        this.AlloyTouch = null;
        this.type = "0";
        this.page=0;
    }

    componentDidMount(){
        this.refresh();
    }

    refresh = () => {
        return this.props.dispatch({ type: 'distribution/incomeDetailEFF',obj:{incomeAndExpenditureType:this.type,pageNo:1 } });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'distribution/incomeDetailEFF', obj:{incomeAndExpenditureType:this.type,pageNo:this.props.distribution.pageNo+1  } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    renderContent = tab =>{
        const {dispatch,distribution} = this.props;
        const {incomeDetailList} = this.props.distribution;
        console.log(this.props.distribution)
        if(incomeDetailList[0]){ return <MyListViewLz
            kid={tab.type}
            style={{marginBottom:"1rem",height:"100%",background:"#fff"}}
            getAlloyTouch={ this.getAlloyTouch }
            refresh={ this.refresh }
            loadMore={ this.loadMore }
            hasMore={ this.props.distribution.pageNo * this.props.distribution.pageSize < this.props.distribution.totalRows  }
            // itemWrapperClass={ goods_list }
            // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
            renderItem={(v,i,a)=>{
                return <Flex key={i} justify="between" style={i==incomeDetailList.length-1?{padding:".3rem 0",margin:"0 .3rem"}:{padding:".3rem 0",margin:"0 .3rem",borderBottom:"1px solid #e5e5e5"}}>
                    <div>
                        <div style={{marginBottom:".2rem"}}>{v.type==1?"一级佣金":v.type==2?"二级佣金":v.type==3?"三级佣金":v.type==4?"佣金提现-平台审核中":v.type==5?"佣金提现-已转入账户余额":""}</div>
                        <div style={{color:"#999"}}>{v.timeStr}</div>
                    </div>
                    <div style={{textAlign:"right"}}>
                        <div style={v.type==4||v.type==5?{marginBottom:".2rem"}:{marginBottom:".2rem",color:"#ff0036"}}>
                            {v.type==4||v.type==5?"-"+v.amount :"+"+v.amount }
                        </div>
                        <div style={{color:"#999"}}>
                            {v.typeDescription }
                        </div>
                    </div>
                </Flex>
            }}
            data={ incomeDetailList }>
        </MyListViewLz>}else{
            return <div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可查看的收支情况呦!</span></div>
        }



    }

    render() {
        const {dispatch} = this.props;
        const {incomeDetailList} = this.props.distribution;
        console.log(this.tabs)
        return ( <Flex direction="column" className={distribution} style={{height:"100%"}}>
                <NavTopBar title="收支详情" dispatch={this.props.dispatch}/>
                <Tabs tabs={this.state.tabs} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let type = tab.type;
                    this.page=index;
                    console.log(index)
                    if(index==0) this.type="";
                    else  this.type=type;
                    this.refresh();

                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                    {this.renderContent}
                </Tabs>

            </Flex>

        )


    }
}

export default connect(({ distribution }) => ({ distribution}))(CashDetail);